<!-- 物资管理 -->
<template>
  <div class="mes-container">
    <div class="containerBox">
      <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
      <!-- 头部 -->
      <all-title ref="allTitle" :comp-info="compInfo" :title-name="titleName" />
      <div class="contentBox">
        <div class="threeBox">
          <div class="allThree">
            <!-- 左边内容 -->
            <div class="allBg allTtile">
              <h3>
                <i class="iconfont icon-shebeibaojing redd"></i>库存预警
              </h3>
              <div class="allConBox">
                <!-- 左边表格 -->
                <left-content ref="leftContent" :tab-data-list="tabDataList" />
                <left-echarts-line ref="leftEchartsLine" />
              </div>
            </div>
          </div>
          <div class="allThree">
            <!-- 中间内容 -->
            <div class="allBg">
              <!-- 中间上面内容 -->
              <center-content ref="centerContent" :center-top-info="centerTopInfo" />
              <center-echarts-pie ref="centerEchartsPie" />
            </div>
          </div>
          <div class="allThree">
            <!-- 右边内容 -->
            <div class="allBg allTtile">
              <h3>
                <i class="iconfont icon-a-programofproduction"></i>采购入库任务
              </h3>
              <div class="allConBox">
                <!-- 右边表格 -->
                <right-content ref="leftContent" :table-data="rightTopTabList" />
                <right-echarts-line ref="rightEchartsLine" />
              </div>
            </div>
          </div>
        </div>
        <div class="twoBox">
          <div class="allTwo">
            <!-- 底部左边内容 -->
            <div class="allBg allTtile">
              <h3>
                <i class="iconfont icon-a-churu4"></i>原料出入库记录
              </h3>
              <div class="allConBox">
                <!-- 左边表格 -->
                <left-bottom-content ref="leftBottomContent" :table-data="leftTabDataList" />
              </div>
            </div>
          </div>
          <div class="allTwo">
            <!-- 底部右边内容 -->
            <div class="allBg allTtile">
              <h3>
                <i class="iconfont icon-a-churu4"></i>成品出入库记录
              </h3>
              <div class="allConBox">
                <!-- 右边表格 -->
                <right-bottom-content ref="rightBottomContent" :table-data="rightTabDataList" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { bgFun } from '../../../bg.js'
import allTitle from '../components/allTitle'
import leftContent from './components/leftContent'
import leftEchartsLine from './components/leftEchartsLine'
import rightContent from './components/rightContent'
import rightEchartsLine from './components/rightEchartsLine'
import centerContent from './components/centerContent'
import centerEchartsPie from './components/centerEchartsPie'
import leftBottomContent from './components/leftBottomContent'
import rightBottomContent from './components/rightBottomContent'
export default {
  name: 'MaterialMangt',
  components: {
    allTitle,
    leftContent,
    leftEchartsLine,
    rightContent,
    rightEchartsLine,
    centerContent,
    centerEchartsPie,
    leftBottomContent,
    rightBottomContent
  },
  data() {
    return {
      titleName: '物资管理看板',
      centerTopInfo: {},
      tabDataList: [],
      leftTabDataList: [],
      rightTabDataList: [],
      rightTopTabList: []
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  async mounted() {
    const loading = this.$loading({
      lock: true,
      text: '数据加载中...', // 数据加载中...
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(async () => {
      loading.close()
      bgFun()
    }, 500)
    this.getInfo()
    /* 根据浏览器收缩echarts重铸 */
    window.onresize = () => {
      if (this.$refs['leftEchartsLine'].myChart)
        this.$refs['leftEchartsLine'].infoSize()
      if (this.$refs['rightEchartsLine'].myChart)
        this.$refs['rightEchartsLine'].infoSize()
      if (this.$refs['centerEchartsPie'].myChart)
        this.$refs['centerEchartsPie'].infoSize()
    }
  },
  beforeDestroy() {},
  methods: {
    getInfo() {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...', // 数据加载中...
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(async () => {
        loading.close()
        await this.getMidInfo()
        await this.getInventoryWarning()
        await this.getRawOutInfo()
        await this.getProOutInfo()
        await this.getPurchaseIn()
        await this.$refs['leftEchartsLine'].getInventoryByMonth()
        await this.$refs['rightEchartsLine'].getInOutByMonth()
      }, 1000)
    },
    /* 获取中间数据 */
    async getMidInfo() {
      const res = await this.$axios.get('/board/material/manage/midInfo')
      if (res?.data.code === 200) {
        this.centerTopInfo = res.data.data
        await this.$refs['centerEchartsPie'].allPie(this.centerTopInfo)
      }
    },
    /* 获取库存预警 */
    async getInventoryWarning() {
      const res = await this.$axios.get(
        '/board/material/manage/inventoryWarning'
      )
      if (res?.data.code === 200) {
        this.tabDataList = res.data.data
      }
    },
    /* 获取原料出库记录 */
    async getRawOutInfo() {
      const res = await this.$axios.get('/board/material/manage/rawOutInfo')
      if (res?.data.code === 200) {
        this.leftTabDataList = res.data.data
      }
    },
    /* 获取成品出库记录 */
    async getProOutInfo() {
      const res = await this.$axios.get('/board/material/manage/proOutInfo')
      if (res?.data.code === 200) {
        this.rightTabDataList = res.data.data
      }
    },
    /* 获取采购入库任务 */
    async getPurchaseIn() {
      const res = await this.$axios.get('/board/material/manage/purchaseIn')
      if (res?.data.code === 200) {
        this.rightTopTabList = res.data.data
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.mes-container {
  position: fixed;
  z-index: 999999 !important;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  // background: radial-gradient(hwb(221 0% 34%) 20%, #001439 70%);
  background: url(../../../assets/images/kb01/kbbg01.jpg) no-repeat;
  background-size: 100% 100%;
  min-width: 1100px;
  min-height: 620px;
  .containerBox {
    position: relative;
    height: 100%;
    /* 中间样式 */
    .contentBox {
      position: absolute;
      top: 70px;
      height: calc(100% - 70px);
      width: 100%;
      padding: 10px;
      /* 全部背景样式 */
      .allBg {
        background: rgba(57, 118, 210, 0.25);
        border-radius: 10px;
        height: calc(100% - 20px);
        margin: 10px;
        padding: 10px;
      }
      .allTtile {
        h3 {
          height: 25px;
          font-size: 14px;
          font-weight: normal;
          color: #c0e0fe;
          border-bottom: 1px solid #898989;
          margin: 0 0 5px 0;
          padding: 0 0 5px 7px;
          i {
            // color: red;
            margin-right: 10px;
          }
          .redd {
            color: red;
          }
        }
      }
      .allConBox {
        height: calc(100% - 30px);
      }
      /* 三个盒子样式 */
      .threeBox {
        height: 65%;
        overflow: hidden;
        .allThree {
          width: 33.333%;
          float: left;
          height: 100%;
        }
      }
      /* 两个盒子样式 */
      .twoBox {
        height: 35%;
        overflow: hidden;
        .allTwo {
          width: 50%;
          float: left;
          height: 100%;
        }
      }
    }
  }
}
</style>
